<template>
  <view class="suggestFeedbackBox" @click="emit('shutDown', '')">
    <view class="content">
      <view
        class="item"
        v-for="(item, index) in suggestList"
        :key="index"
        @click.stop="choose(item.message)"
      >
        <view>
          <uni-icons :type="item.s_url" size="26"></uni-icons>
        </view>
        <text>{{ item.message }}</text>
      </view>
    </view>
  </view>
</template>

<!-- 反馈建议组件 -->
<script lang="ts" setup>
import type { Suggest } from '@/config/data/data'
import uniIcons from '@/components/uni/uni-icons/uni-icons.vue'
import {
  ref,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
} from 'vue'

//反馈建议列表数据
const suggestList = ref<Suggest[]>([
  {
    message: '内容质量差',
    s_url: 'info-filled',
  },
  {
    message: '不想看该作者',
    s_url: 'eye-slash-filled',
  },
  {
    message: '不感兴趣',
    s_url: 'clear',
  },
  {
    message: '内容重复',
    s_url: 'refresh-filled',
  },
])

//关闭事件
const emit = defineEmits(['shutDown'])

//选中事件
const choose = (thing: string) => {
  //关闭反馈窗口
  emit('shutDown', thing)
}

// 组件周期函数--监听组件挂载完毕
onMounted(() => {})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {})
</script>

<style scoped lang="scss">
.suggestFeedbackBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  animation: gradient 0.5s ease-in 0s 1 forwards;

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550rpx;
    background-color: rgb(252, 250, 250);
    border-radius: 5rpx;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    animation: zoom 1s ease-in-out 0s 1 forwards;

    .item {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 100rpx;
      padding: 10rpx 0 10rpx 10rpx;

      .image {
        margin-right: 20rpx;
      }
    }
  }

  @keyframes gradient {
    0% {
      background-color: transparent;
    }
    100% {
      background-color: rgba(86, 83, 83, 0.139);
    }
  }

  @keyframes zoom {
    0% {
      transform: translateX(-50%) translateY(-50% scale(0));
    }
    25% {
      transform: translateX(-50%) translateY(-50%) scale(1.03);
    }
    50% {
      transform: translateX(-50%) translateY(-50%) scale(1);
    }
    75% {
      transform: translateX(-50%) translateY(-50%) scale(1.01);
    }
    100% {
      transform: translateX(-50%) translateY(-50%) scale(1);
    }
  }
}
</style>
